/* eslint-disable react/jsx-key */
import React, { Component } from 'react';
import { Typography } from 'antd';
import style from './index.less';

const { Title, Text } = Typography;

interface ListItem {
  text: string;
  title: string;
  key: string;
}
interface Props {
  list: ListItem[];
}

export default class index extends Component {
  render() {
    const { list = [] } = this.props as Props;
    return (
      <div className={style.separate}>
        {list.map((e: ListItem) => (
          <div key={e.key} className="separate-line">
            <Text type="secondary">{e.text}</Text>
            <Title level={4}>{e.title}</Title>
          </div>
        ))}
      </div>
    );
  }
}
